import React, {
  useCallback,
  useEffect,
  useInsertionEffect,
  useState,
} from "react";
import { useLayoutEffect } from "react";

//React.memo用来缓存一个组件用的，只有当前组件内容发生变化才会重新渲染
const Child = React.memo((props) => {
  console.log("child被执行");

  return (
    <>
      <h1>Child------{props.name}</h1>
      <button onClick={() => props.changeName("hhhh")}>修改名字</button>
    </>
  );
});

//app重新渲染会是changeName重新创建导致儿子被调用
function App() {
  const [count, setCount] = useState(100);
  const [name, setName] = useState("张三");

  // 2.useCallback缓存方法,两个参数,一个回调方法(需要做缓存的函数),
  // 一个依赖数组,只有依赖数组中的值变化才会重新执行
  const changeName = useCallback((val) => {
    setName(val);
  }, []);
  //   // 1.先定义接收方法
  // function changeName(value) {
  //   setName(value);
  // }

  return (
    <div>
      <h1 id="title">APP</h1>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        {count}
      </button>

      {/* <button
        onClick={() => {
          setName("lisi");
        }}
      >
        点击修改名字
      </button> */}
      <hr></hr>
      <Child name={name} changeName={changeName}></Child>
      {/* count变化会导致child自己被重新渲染，但count与child无关联，
      造成资源浪费，让无关组件无需重新渲染
      */}
    </div>
  );
}

export default App;
